<template>
    <div class="mod-config">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                    <el-form-item>
                        <el-input v-model="dataForm.guangGaoMingCheng" placeholder="广告名称" clearable></el-input>
                    </el-form-item>

                    <el-form-item>
                      <el-select v-model="dataForm.zhuangTai" placeholder="状态" clearable>
                        <el-option
                          label="请选择"
                          value="">
                        </el-option>
                        <el-option
                          label="启用中"
                          value="启用中">
                        </el-option>
                        <el-option
                          label="已停用"
                          value="已停用">
                        </el-option>
                      </el-select>
                    </el-form-item>
            <el-form-item>
                <el-button @click="getDataList(1)">查询</el-button>
                <el-button type="primary" @click="addOrUpdateHandle()">新增
                </el-button>
                <el-button type="danger" @click="deleteHandle()"
                           :disabled="dataListSelections.length <= 0">批量删除
                </el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="dataList"
                border
                v-loading="dataListLoading"
                @selection-change="selectionChangeHandle"
                style="width: 100%;">
            <el-table-column
                    label="选中"
                    type="selection"
                    header-align="center"
                    align="center"
                    width="50">
            </el-table-column>
            <el-table-column
                    type="index"
                    label="序号"
                    header-align="center"
                    align="center"
                    width="50">
            </el-table-column>
                    <el-table-column
                            prop="guangGaoMingCheng"
                            header-align="center"
                            align="center"
                            label="广告名称">
                    </el-table-column>
                    <el-table-column
                            prop="tuPian"
                            header-align="center"
                            align="center"
                            label="图片">
                      <template v-slot="scope">
                        <el-image
                          style="width: 100px; height: 100px"
                          :src="getImg(scope.row.tuPian)"
                          fit="fill"></el-image>
                      </template>
                    </el-table-column>
                    <el-table-column
                            prop="lianJie"
                            header-align="center"
                            align="center"
                            label="链接">
                    </el-table-column>
                    <el-table-column
                            prop="zhuangTai"
                            header-align="center"
                            align="center"
                            label="状态">
                    </el-table-column>
            <el-table-column
                    fixed="right"
                    header-align="center"
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small"
                               @click="infoHandle(scope.row.id)"><i class="el-icon-edit"></i>查看详情</el-button>
                    <el-button type="text" size="small"
                               @click="addOrUpdateHandle(scope.row.id)"><i class="el-icon-edit"></i>修改</el-button>
                    <el-button type="text" size="small"
                               @click="deleteHandle(scope.row.id)"><i class="el-icon-delete"></i>删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                :total="totalPage"
                layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <el-dialog title="添加或编辑" :visible.sync="addOrUpdateVisible" >
            <el-form :rules="dataRule" :model="dataSaveForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()">
                <el-form-item hidden :label-width="'120px'"  prop="id">
                    <el-input v-model="dataSaveForm.id" autocomplete="off"></el-input>
                </el-form-item>
                        <el-form-item label="广告名称" :label-width="'120px'"  prop="guangGaoMingCheng">
                            <el-input v-model="dataSaveForm.guangGaoMingCheng" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="图片" :label-width="'120px'"  prop="tuPian">

                          <img-upload ref="imgUpload"
                            v-model="dataSaveForm.tuPian"

                            :list="tuPianList"
                            :limit="1"
                          >
                          </img-upload>
                        </el-form-item>
                        <el-form-item label="链接" :label-width="'120px'"  prop="lianJie">
                            <el-input v-model="dataSaveForm.lianJie" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" :label-width="'120px'"  prop="zhuangTai">
                          <el-select v-model="dataSaveForm.zhuangTai" placeholder="请选择">
                            <el-option
                              label="请选择"
                              value="">
                            </el-option>
                            <el-option
                             label="启用中"
                            value="启用中">
                            </el-option>
                            <el-option
                              label="已停用"
                              value="已停用">
                            </el-option>
                          </el-select>
                        </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="qx()">取 消</el-button>
                <el-button type="primary" @click="dataFormSubmit()">确 定</el-button>
            </div>
        </el-dialog>


        <!-- 弹窗, 新增 / 修改 -->
        <el-dialog title="信息管理广告管理" :visible.sync="infoVisible">
            <div class="mod-config">
                <el-descriptions :column="2" :colon="false" title="设备信息">
                            <el-descriptions-item label="广告名称">{{this.infoList.guangGaoMingCheng}}</el-descriptions-item>
                            <el-descriptions-item label="图片">{{this.infoList.tuPian}}</el-descriptions-item>
                            <el-descriptions-item label="链接">{{this.infoList.lianJie}}</el-descriptions-item>
                            <el-descriptions-item label="状态">{{this.infoList.zhuangTai}}</el-descriptions-item>
                </el-descriptions>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="qxinfo()">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import ImgUpload from "../../components/upload/ImgUpload"
    export default {
      components: {
        ImgUpload,
      },
        data() {
            return {
              hideUploadEdit:false,
                tuPianList: [],
                dataForm: {
                                guangGaoMingCheng:'',
                                zhuangTai:'',
                },
                dataSaveForm: {
                                id:'',
                                guangGaoMingCheng:'',
                                tuPian:'',
                                lianJie:'',
                                zhuangTai:'',
                },
                dataRule: {
                                guangGaoMingCheng: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                                tuPian: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                                lianJie: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                                zhuangTai: [
                                {required: true, message: '不能为空', trigger: 'blur'}
                            ],
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,

                infoList:[],
                infoLoading: false,
                infoVisible: false,

            }
        },

        activated() {
            this.getDataList()
        },
        methods: {
getImg(id){
  return this.$http.adornUrl('/api-file/file/view/file?fileId='+id);
},
            getDataList(pageIndex) {
                if (pageIndex) {
                    this.pageIndex = pageIndex
                }
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/api-trading/xinXiGuanLi/xinXiGuanLiGuangGaoGuanLi/list'),
                        method: 'get',
            params: this.$http.adornParams({
                'page': this.pageIndex,
                        'limit': this.pageSize,
                'guangGaoMingCheng': this.dataForm.guangGaoMingCheng,
                'tuPian': this.dataForm.tuPian,
                'lianJie': this.dataForm.lianJie,
                'zhuangTai': this.dataForm.zhuangTai,
            })
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.dataList = data.data.records
                        this.totalPage = Number(data.data.total)
                    } else {
                        this.dataList = []
                        this.totalPage = 0
                    }
                    this.dataListLoading = false
                })
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            qx() {
                this.addOrUpdateVisible = false;
              this.$refs.imgUpload.clearFiles();
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true;

              this.tuPianList=[];
                this.$nextTick(() => {

                  this.$refs['dataForm'].resetFields()
                  console.log("%c"+this.dataSaveForm.lianJie,"color:red;")
                    if (id) {
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/xinXiGuanLi/xinXiGuanLiGuangGaoGuanLi/getById`),
                                method: 'get',
                                params: this.$http.adornParams({"id":id})
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.dataSaveForm.id = data.data.id
                                this.dataSaveForm.guangGaoMingCheng = data.data.guangGaoMingCheng;
                                this.dataSaveForm.tuPian = data.data.tuPian;
                              if (data.data.tuPian) {
                                data.data.tuPian.split(',').forEach(item => {
                                  this.tuPianList.push({name: 'img', url: this.$http.adornUrl('/api-file/file/view/file?fileId=' + item)})
                                })
                              }
                                this.dataSaveForm.lianJie = data.data.lianJie;
                                this.dataSaveForm.zhuangTai = data.data.zhuangTai;
                            }
                        })
                    }
                })

            },
            qxinfo() {
                this.infoVisible = false;


            },
            // 新增 / 修改
            infoHandle(id) {
                this.infoVisible = true;
                this.infoList=[];
                this.$http({
            url: this.$http.adornUrl(`/api-trading/xinXiGuanLi/xinXiGuanLiGuangGaoGuanLi/getById`),
                        method: 'get',
                        params: this.$http.adornParams({"id":id})
            }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.infoList=data.data;
                    }
                })
            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id
                })
                this.$confirm(`确定要进行删除操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http({
                        url: this.$http.adornUrl('/api-trading/xinXiGuanLi/xinXiGuanLiGuangGaoGuanLi/delByIds'),
                            method: 'post',
                            data: this.$http.adornData(ids, false)
                }).then(({data}) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                        this.$message.error(data.msg)
                        }
                    })
                })
            },
            // 表单提交
            dataFormSubmit() {
            this.$refs['dataForm'].validate((valid) => {
                    if (valid) {
                        this.$http({
                    url: this.$http.adornUrl(`/api-trading/xinXiGuanLi/xinXiGuanLiGuangGaoGuanLi/save`),
                                method: 'post',
                    data: this.$http.adornData({
                    'id': this.dataSaveForm.id || undefined,
                        'guangGaoMingCheng': this.dataSaveForm.guangGaoMingCheng,
                        'tuPian': this.dataSaveForm.tuPian,
                        'lianJie': this.dataSaveForm.lianJie,
                        'zhuangTai': this.dataSaveForm.zhuangTai,
                    })
                    }).then(({data}) => {
                            if (data && data.code === 0) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.addOrUpdateVisible = false
                                        this.getDataList()
                                    }
                                })
                            } else {
                            this.$message.error(data.msg)
                            }
                        })
                    }
              this.$refs.imgUpload.clearFiles();
                })



            },
        }
    }
</script>
